<template>
  <ContentContainer inner :pagination="false" :refresh="false">
    <template #header>
      <a-alert>
        1. 仅限 L1 节点作为来访端口使用。<br />
        2. HTTP、HTTPS 固定开启 80 、443 端口，系统预留 8888 端口。<br />
        3. 其他可配置端口有效范围为 1024 至 65535，请确保各端口区间互不重叠。<br />
        4. 如配置多个端口，请用换行分隔。
      </a-alert>
    </template>
    <a-form :model="formState" layout="vertical" class="w-100!">
      <a-form-item label="HTTP 端口">
        <a-textarea
          v-model="formState.http"
          placeholder="例如：
4015
4016-4085"></a-textarea>
      </a-form-item>
      <a-form-item label="HTTPS 端口">
        <a-textarea
          v-model="formState.https"
          placeholder="例如：
5015
5016-5085"></a-textarea>
      </a-form-item>
      <a-button type="primary" class="w-fit" :loading="loading" @click="save"
        >保存配置</a-button
      >
    </a-form>
  </ContentContainer>
</template>
<script lang="ts" setup>
import {
  getApiConfigCdnPortApi,
  updateApiConfigCdnPortApi
} from '@/apis/modules/config'

const formState = reactive({
  http: '',
  https: ''
})

const getPortConf = () => {
  getApiConfigCdnPortApi({}).then((res) => {
    formState.http = res.http?.join('\n')
    formState.https = res.https?.join('\n')
  })
}
const loading = ref(false)
function save() {
  const data = {
    http: formState.http?.split('\n').filter(Boolean),
    https: formState.https?.split('\n').filter(Boolean)
  }
  loading.value = true
  updateApiConfigCdnPortApi(data)
    .then(() => ToastUtils.success('操作成功'))
    .finally(() => (loading.value = false))
}
onMounted(() => {
  getPortConf()
})
</script>
<style lang="less" scoped>
.arco-alert {
  align-items: start;
  color: var(--color-text-2);
  :deep(.arco-alert-icon) {
    width: 16px;
    height: 22px;
    line-height: 22px;
  }
  :deep(.arco-alert-content) {
    line-height: 22px;
    font-size: 14px;
  }
}
:deep(.arco-textarea) {
  min-height: 110px;
}
</style>
